<template>
  <view class="box rtl">
    <!-- 顶部导航 -->
    <lg-topbar bgColor="#127B56" height="260rpx">
      <view style="width: 100%">
        <view class="bg-topbar-content">
          <view @click="Back">
            <uv-icon name="arrow-left" size="25" color="#fff"></uv-icon>
          </view>
          <view>
            {{ t("Results") }}
            ({{ total }})
          </view>
          <view></view>
        </view>
        <view style="margin: 20rpx 0px; padding: 0 20rpx">
          <!-- <uv-search /> -->
          <BgSearch
            @search="search_btn"
            :placeholder="t('Search')"
            :showAction="true"
            actionText="搜索"
            :animation="true"
            height="80rpx"
          />
        </view>
        <view class="head_select">
          <view class="select_item" @click="headSecondaryMenu">
            <view class="text">
              {{ currentCategory?.label ?? "Category" }}
            </view>
            <view class="select_icon">
              <uv-icon name="arrow-down" size="18" color="#fff"></uv-icon>
            </view>
          </view>
          <view class="select_item" @click="headThirdlevel">
            <view class="text">
              {{ currentTab?.label ?? "Tabs" }}
            </view>
            <view class="select_icon">
              <uv-icon name="arrow-down" size="18" color="#fff"></uv-icon>
            </view>
          </view>
        </view>
      </view>
    </lg-topbar>

    <view class="content" v-if="dataList">
      <view class="" v-if="dataList.length > 0">
        <view
          class="item"
          v-for="(item, i) in dataList"
          @click="getDetails(item.id, i)"
        >
          <view class="num"> #{{ i }} </view>
          <view
            class="item_box"
            :class="{ item_box_active: item.quantity > 0 }"
          >
            <view class="item_text">
              <view class="info_num">
                <!-- 05546-02220-Linge -->
                {{ item.oe }}
              </view>
              <view class="notes">
                <!-- BRACKET ASSY-ENGINE MOUNTING.TUSSAN -->
                {{ item.productName }}
              </view>
              <view class="info_price"> {{ item.productPrice }}SAR </view>
            </view>
            <view class="item_btn" v-if="item.quantity > 0">
              <!-- {{item.stock}} -->
              <text>{{ item.quantity }}</text>
            </view>
            <view class="item_add" v-else>
              <image src="/static/images/cart/add.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="nodata" v-else>
        <image
          class="img"
          src="/static/images/cart/noData.png"
          mode="widthFix"
        ></image>
        <view class="">
          {{ t("No results found") }}
        </view>
      </view>
    </view>
    <view class="" v-if="cartList?.length > 0">
      <view class="footer footer_data" v-if="dataList.length" @click="goToCart">
        <view style="width: 100%; text-align: center">
          Check cart（{{ cartList.length }}）
        </view>
      </view>
    </view>
  </view>
  <goodsModelView
    ref="goodsModelRef"
    :title="title"
    :goods-detail="goodsDetail"
    @confirm="goodsConfrm"
  />
  <shopCartPlace ref="CartPlace" />
</template>

<script setup>
import shopCartPlace from "@/components/shopCartView/shopCartPlace.vue";
import BgSearch from "@/components/BgSearch/index.vue";
import goodsModelView from "@/components/GoodsModel/index.vue";
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { HomeAPI, CartAPI } from "@/api/index";
import { useDeviceStore } from "@/store";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import { useCategoryStore } from "@/store";
import { storeToRefs } from "pinia";
const categoryStore = useCategoryStore();
const { selectedSecondCategory, selectedThirdCategory, selectedTab } =
  storeToRefs(categoryStore);

const deviceStore = useDeviceStore();
const { t } = useI18n();
const goodsModel = ref();
const goodsModelRef = ref();
const CartPlace = ref();
const carMakeId = ref("");
const carMake = ref("");

const listForOe = ref([]);
const dataList = ref(null);
const total = ref(0);
const goodsDetail = ref(null);
const goodsIndex = ref(-1);
const title = ref();
const search_text = ref("");
const cartList = ref([]);

const currentTab = ref({});
const currentCategory = ref({});

onLoad((e) => {
  if (e.carMakeId) {
    carMakeId.value = e.carMakeId;
  }
  if (e.carMake) {
    carMake.value = e.carMake;
  }
});

onShow(() => {
  if (selectedSecondCategory.value || selectedThirdCategory.value) {
    currentCategory.value = selectedThirdCategory.value
      ? selectedThirdCategory.value
      : selectedSecondCategory.value;
  } else {
    currentCategory.value = "";
  }
  if (selectedTab.value) {
    currentTab.value = selectedTab.value;
  } else {
    currentTab.value = "";
  }
  query();
});
onHide(() => {
  categoryStore.clearSelectedSecondCategory();
  categoryStore.clearSelectedThirdCategory();
  categoryStore.clearSelectedTab();
});
const Back = () => {
  uni.navigateBack();
};
const search_btn = (text) => {
  if (text) {
    listForOe.value = [text];
  } else {
    listForOe.value = search_text.value ? search_text.value.split("\n") : [];
  }
  query();
};

const goodsConfrm = async (e) => {
  CartAPI.addCart(
    {
      shopId: deviceStore.MyShop.id,
      carMakeId: e.goodsDetail.id,
      oeList: [e.goodsDetail.oe],
      quantity: e.num,
    },
    "normal"
  ).then((res) => {
    console.log(res);
    if (res.code == 200) {
      goodsModelRef.value.close();
      query();
    }
  });
};
const getDetails = async (id, index) => {
  goodsIndex.value = index;
  let res = await CartAPI.getDetails(id);
  console.log(goodsModel.value);
  goodsDetail.value = res.data;
  title.value = res.data.oe;
  goodsModelRef.value.open();
  // goodsModel.value.control(true)
  // goodsModelRef.value.open
  console.log(res);
};

const query = async () => {
  let myshop = deviceStore.MyShop;
  try {
    let res = await HomeAPI.getHomeSearch({
      carMake: carMakeId.value,
      shopId: myshop.id,
      categorySecondId: selectedSecondCategory.value?.id ?? undefined,
      categoryThirdId: selectedThirdCategory.value?.id ?? undefined,
      categoryThirdId: selectedTab.value?.id ?? undefined,
    });
    res?.data?.items?.forEach((item) => {
      // console.log()
      item.quantity = 0;
    });
    dataList.value = res?.data?.items;
    total.value = res?.data?.total;

    let cartRes = await CartAPI.getmyCartList("normal", deviceStore.MyShop.id, {
      shopId: deviceStore.MyShop.id,
    });
    if (cartRes.code == 200 && cartRes.data) {
      const allKey = Object.keys(cartRes.data).find((key) =>
        key.toLowerCase().includes("all")
      );
      cartList.value = cartRes.data[allKey];
    }
    dataList.value.forEach((item) => {
      cartList.value.forEach((cartItem) => {
        if (item.oe == cartItem.oe) {
          item.quantity = cartItem.quantity;
        }
      });
    });
  } catch (e) {
    console.log(e);
  }
};

function goToCart() {
  uni.switchTab({
    url: "/pages/cart/index",
    // pages/cart/index
  });
}
const headSecondaryMenu = () => {
  // MenuModel.value.isShow = true
  //  :carMakeId="carMakeId"
  uni.navigateTo({
    url: `/pages/carModel/category?carMakeId=${carMakeId.value}`,
  });
};
const headThirdlevel = () => {
  // MenuModel.value.isShow = true;
  // // levelIndex.value = 1;
  // MenuIndex.value = 2
  uni.navigateTo({
    url: `/pages/carModel/tabs?carMakeId=${carMakeId.value}`,
  });
};
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.address-title {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 20rpx;

  .icon_img {
    width: 40rpx;
  }
}

.remark {
  padding: 0rpx 0 20rpx;

  .remark-title {
    width: 90%;
    margin: 0 auto;
    padding: 10rpx 0;
    font-size: 28rpx;
  }

  .remark-text {
    border: 1px solid #cccccc;
    border-radius: 10rpx;
    width: 90%;
    margin: 0 auto;
    padding: 10rpx;
  }
}

.address_info {
  display: flex;

  .address_img {
    width: 200rpx;
    height: 200rpx;
    display: flex;
    align-items: center;

    .img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  .address_info_detail {
    flex: 1;
    font-size: 24rpx;

    .postCode {
      padding: 5rpx 10rpx;
      border-radius: 5rpx;
      background: $primary-b;
      color: #fff;
      width: fit-content;
      margin-bottom: 20rpx;
    }

    .address_info_item {
      margin-bottom: 10rpx;
    }
  }
}

.goods-num {
  display: flex;
  align-items: center;
  // border: 1px solid #ccc;
  border-radius: 10rpx;
  width: 300rpx;
  text-align: center;
  margin: 20rpx auto;

  .input {
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    width: 40%;
    height: 80rpx;
    line-height: 80rpx;
  }

  .goods-sum {
    border: 1px solid #ccc;
    width: 30%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 0 10rpx 10rpx 0;
  }

  .goods-sum:nth-child(1) {
    border-radius: 10rpx 0 0 10rpx;
  }
}

.swiper {
  padding: 10rpx;

  image {
    width: 100%;
  }
}

.box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bg-topbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: #fff;
  padding: 0 20rpx;
}

.head {
  background: #fff;
  border-radius: 0 0 20rpx 20rpx;

  .view_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 0 0 20rpx 20rpx;
    padding: 20rpx 20rpx;
  }

  .head_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 20rpx;

    .select_item {
      width: 45%;
      border: 1px solid #fff;
      border-radius: 10rpx;
      padding: 5rpx 10rpx;
      color: #fff;
      position: relative;

      .select_icon {
        position: absolute;
        right: 10rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

.head_select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 20rpx;

  .select_item {
    width: 45%;
    border: 1px solid #fff;
    border-radius: 10rpx;
    padding: 5rpx 40rpx 5rpx 10rpx;
    color: #fff;
    position: relative;
    height: 50rpx;
    // line-height: 60rpx;

    box-sizing: border-box;
    display: flex;
    align-items: center;

    .text {
      // padding-right: 10rpx;
      overflow: hidden;
      font-size: 22rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 100%;
      box-sizing: border-box;
    }

    .select_icon {
      position: absolute;
      right: 10rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.content {
  flex: 1;
  overflow-y: scroll;
  padding: 0 15rpx;

  .nodata {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 120rpx;

    .img {
      width: 200rpx;
      padding-bottom: 20rpx;
    }
  }

  .item {
    margin-bottom: 20rpx;

    .num {
      color: #7f7f7f;
      font-size: 24rpx;
      margin-left: 5rpx;
    }

    .item_box {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 10rpx;
      padding: 20rpx;

      .item_text {
        flex: 1;

        .info_num {
          font-size: 32rpx;
          font-weight: bold;
        }

        .info_price {
          color: #e57854;
          font-size: 28rpx;
        }

        .notes {
          margin-top: 10rpx;
          font-size: 24rpx;
          color: #a9a9a9;
        }
      }

      .item_add {
        padding: 30rpx;

        image {
          width: 46rpx;
          height: 46rpx;
        }
      }

      .item_btn {
        width: 100rpx;
        background: $primary-b;
        height: 50rpx;
        border-radius: 10rpx;
        color: #fff;
        text-align: center;
        line-height: 50rpx;
      }
    }

    .item_box_active {
      background: #127b56;
      color: #fff;

      .item_btn {
        width: 100rpx;
        background: #fff;
        height: 50rpx;
        border-radius: 10rpx;
        color: $text-primary;
        text-align: center;
        line-height: 50rpx;
      }

      .item_text {
        flex: 1;

        .info_price {
          color: #fff;
        }

        .notes {
          color: #fff;
        }
      }
    }
  }
}

.footer {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;

  .title {
    text-align: center;
    padding: 20rpx 0;
  }

  .search_box {
    border: 1px solid #ccc;
    border-radius: 10rpx;
    margin: 20rpx;
    width: calc(100% - 40rpx);
    min-height: 500rpx;
    padding: 20rpx;
    box-sizing: border-box;
  }

  .footer_active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 40rpx;
    background: #127b56;
    color: #fff;
    border-radius: 10rpx 10rpx 0 0;
    font-size: 28rpx;

    .Confrm {
      display: flex;
      align-items: center;
    }

    .tip {
      font-size: 24rpx;
      color: #dddddd;
    }
  }
}

.footer_data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  background: #127b56;
  color: #fff;
  border-radius: 10rpx 10rpx 0 0;
  font-size: 28rpx;

  .Confrm {
    display: flex;
    align-items: center;
  }

  .tip {
    font-size: 24rpx;
    color: #dddddd;
  }
}

.p_name {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 10rpx;
  display: flex;

  .img {
    width: 30%;
  }

  .good-year {
    color: #a6a6a6;
  }
}
</style>
